<template>
    <vue-tree-table :items='tableList'
                    :columns='columns' :search-config="searchConfig" @on-query="changeQuery" @on-row-click='rowClick'>
        <template slot="search" slot-scope="props">
            <i-input v-model="props.items.keyword" placeholder="请输入关键字"></i-input>
        </template>
    </vue-tree-table>
</template>


<script>
  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data: function () {
      return {
        columns: [{
          title: '栏目名称',
          key: 'name',
          align: 'left',
          head: true,
          width: '150',
        }, {
          title: '操作',
          type: 'action',
          actions: [
            {
              type: 'text',
              icon: 'compose',
              text: 'edit'
            },
            {
              type:'text',
              icon:'plus-round',
              text:'son'
            },

            {
              type: 'text',
              icon: 'trash-a',
              text: 'delete'
            }],
          width: '150',
        }],
        list:[],
        searchConfig: {
          items: {
            keyword: ''
          },
          status: true,
          complex: false
        },
        model: this.$modelDataSource({
          url: '/api/admin/column',
          dataKey: 'model',
          attributes: {
            id: 0
          }
        }),
        query: {},
        newPassword: ''
      };
    },
    methods: {
      getList: function () {
        let self = this;
        axios.get('/api/admin/column',{params:self.query}).then(function (res) {
          self.list = res.data
        })
        return self.list;
      },
      showEditDialog: function (id) {
        this.stateManager.editModelId = id;
        this.stateManager.buttonLoading = true;
      },
      changeQuery: function (query) {
        this.query = query;
        this.stateManager.refreshList = true;
      },
      updateModel: function (userId) {
        this.stateManager.editDialogVisible = true;
        this.stateManager.editSonVisible = false
        this.stateManager.editModelId = userId;
      },
      addSonModel: function (Id) {
        this.stateManager.editDialogVisible = true;
        this.stateManager.editSonVisible = true;
        this.stateManager.editSonModelId = Id;
        this.stateManager.editModelId = 0;
      },
      deleteModel: function (modelId, modelName) {
        console.log(modelId);
        let self = this;
        this.$Modal.confirm({
          title: '删除确认',
          content: '确认删除 ' + modelName + ' 吗，删除后无法恢复',
          loading: true,
          onOk: function () {
            self.model.reset();
            self.model.uuid = modelId;
            self.model.destroy(function () {
              self.$Modal.remove();
              self.stateManager.refreshList = true;
              self.$Notice.success({
                title: '删除成功',
                desc: modelName + '已删除'
              });
            });
          },
          onCancel: function () {
            console.log('取消删除');
          }
        });
      },
      rowClick: function (item, type) {
        console.log(item, type);
        switch (type) {
          case 'edit':
            this.updateModel(item.id);
            break;
          case 'delete':
            this.deleteModel(item.id, item.name)
            break;
          case 'son':
            this.addSonModel(item.id)
        }
      }
    },
    computed: {
      user(){
        return this.$store.state.user;
      },
      tableList() {
        let self = this;
        if (this.stateManager.refreshList) {
          self.list = self.getList()
          self.stateManager.refreshList = false;
          console.log(self.list);
          return self.list;
        }
        return this.list;
      }
    }
  }
</script>